<template>
	<div class="ui-detail">

    <div class="ui-promotions-wrapper ui-detail-common">
      <!-- header -->
      <div class="promotions-header header">
        <h3>
          商品详情
        </h3>
      </div>
    </div>
		<div>
			<desc-item
				:mbBody="mbBody"
				:detailInfo="detailInfo"
				v-if="detailInfo"
			></desc-item>
		</div>
		<v-back-top v-if="isshowBacktop" :target="target"></v-back-top>
    <recommend-item></recommend-item>
	</div>
</template>

<script>
import { mapState } from 'vuex'
import DescItem from './DescItem'
import BackTop from './DetailBackTop'
import RecommendItem from './RecommendItem';

export default {
  data () {
    return {
      isshowBacktop: false,
      is_test:''
    }
  },
  mounted () {
    // 添加滚动事件
    var element = this.$el
    element.addEventListener('scroll', event => {
      let params = {
        top: element.scrollTop,
        height: element.scrollHeight
      }
      if (params.top >= 100) {
        this.isshowBacktop = true
      } else {
        this.isshowBacktop = false
      }
      // if( params.height - (params.top + element.offsetHeight + 2) <  0) {
      // 	this.isshowBacktop = true;
      // } else {
      // 	this.isshowBacktop = false;
      // }
    })

    // 计算内容高度
    this.$nextTick(() => {
      this.target = document.querySelector('.ui-detail')
    })
  },

  components: {
    'desc-item': DescItem,
    'v-back-top': BackTop,
    RecommendItem
  },

  computed: mapState({
    detailInfo: state => state.goodsdetail.detailInfo,
    mbBody: state => state.goodsdetail.mbBody
  }),

  methods: {
    // shouSrc () {
    //   this.$parent.shouSrc()
    // },
    shouSrc(src){
      // console.log(src)
      this.$parent.shouSrc(src)
    }
  }
}
</script>

<style lang="scss" scoped>
//详情标题
.ui-promotions-wrapper {
  height: auto;
  border-bottom: 1px solid #f5f5f5;
  .promotions-header {
    padding: 0 0.75rem;
    margin-top: 0.4rem;
    height: 2rem;
    line-height: 2rem;
    background: #fff;
    h3 {
      text-align: center;
      font-size: 0.7rem;
      color: #333;
      .iconfont {
        float: right;
        margin-right: -0.55rem;
      }
    }
  }
}
.ui-detail {
	// height: 100%;
	// overflow: auto;
  margin-top: 10px;
}
</style>
